<template>
	<button class="return" @click="backHome">
		<svg
			t="1666961452971"
			class="icon"
			viewBox="0 0 1024 1024"
			version="1.1"
			xmlns="http://www.w3.org/2000/svg"
			p-id="2943"
			width="20"
			height="20">
			<path
				d="M73.142857 490.569143L565.248 1024l95.085714-96.548571-320.512-343.332572 611.035429 1.462857v-146.285714H317.732571l344.649143-344.795429L565.248 0z"
				p-id="2944"
				fill="#ffffff"></path>
		</svg>
	</button>
	<div class="hello">
		<p class="title">2048玩法介绍！</p>
		<p>通过“↑←↓→”合并相同方块</p>
		<img src="../assets/gameInteodoce1.jpg" alt="" height="200" />
		<p>首先合成较小的方块</p>
		<img src="../assets/gameInteodoce2.png" alt="" height="200" />
		<p>把大的数字留在角落</p>
		<img src="../assets/gameInteodoce3.png" alt="" height="200" />
	</div>
</template>

<script>
	export default {
		name: 'GameIntroduce',
		props: {
			msg: String,
		},
		methods: {
			backHome() {
				this.$router.push({
					name: 'homepage',
				});
			},
		},
	};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
	h3 {
		margin: 40px 0 0;
	}

	ul {
		list-style-type: none;
		padding: 0;
	}

	li {
		display: inline-block;
		margin: 0 10px;
	}

	a {
		color: #42b983;
	}

	button {
		position: absolute;
		left: 30px;
	}

	img {
		margin: 0;
	}

	.title {
		font-weight: 900;
		font-size: 60px;
	}

	button {
		cursor: pointer;
	}
	.return {
		position: fixed;
		top: 20px;
		left: 30px;
		font-size: 20px;
		font-weight: bolder;
		padding: 8px 15px 5px 15px;
		border: none;
		background-color: #8f7a66;
		border-radius: 15%;
		color: white;
	}
</style>
